<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-09 10:10:19
-->
<template>
    <div class="song-list">
        <!-- 顶部精品歌单 -->
        <TopsonglistVue :topList="discover.topSongsList[0]" v-if="discover.topSongsList.length !== 0"></TopsonglistVue>

        <!-- 标签导航 传递自定义事件-->
        <TagsNavVue :hotTagsList="discover.hotTagsList" :all="discover.all" @click="tagClick"></TagsNavVue>

        <!-- 歌单列表 复用-->
        <div class="main-list" v-if="songList.length !== 0">
            <div class="list" v-for="(item) in songList" :key="item.id">
                <SongList :item="item"></SongList>
            </div>

        </div>

        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination v-if="songList.length !== 0" small background layout="prev, pager, next"
                :total="songlistTotal" v-model:page-size="pageSize" v-model:current-page="page"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import { useDiscover } from '../../../store/discovermusic'
import { onMounted, ref } from "vue";
import TopsonglistVue from './children/Topsonglist.vue';
import TagsNavVue from '../../../components/TagsNav.vue';
import SongList from '../../../components/content/songlist/SongList.vue'
import { getSongList } from '../../../api/findmusic/singslist/singslist'
const discover = useDiscover()
//默认是全部歌单
let tagName = ref('全部')
let songList = ref([])
let songlistTotal = ref(0)
//当前页
let page = ref(1)
let pageSize = ref(48)

//当前页改变时触发的函数
function handleCurrentChange(pages) {
    page.value = pages
    //再次发送请求获取第xxx页歌单列表
    getSongs(tagName.value, page.value)
    
    //将页面回弹到顶部
    window.scroll(0,0)
}

//获取顶部精品歌单 取一个
function topList() {
    discover.getTopSongList(tagName.value)
}
//获取歌单列表和歌单总数
async function getSongs(cat, pages) {
    let offset = (pages - 1) * 48
    let res = await getSongList(cat, offset)
    if (res.status === 200) {
        songList.value = res.data.playlists
        songlistTotal.value = res.data.total
    }

}


//处理点击标签事件
function tagClick(tname) {
    //保存标签名
    tagName.value = tname
    //再次获取对应歌单的顶部精品歌单
    topList()
    //父组件收到子组件传递的name，再次发请求获取对应歌单
    getSongs(tagName.value, page.value)
    //重新赋值为1
    page.value = 1
}

onMounted(() => {
    //获取精品歌单标签列表
    discover.getHighqualityTags()
    //获取热门歌单分类标签
    discover.getHotTag()
    //获取歌单
    getSongs(tagName.value, page.value)

    //获取顶部精品歌单
    topList()

    //获取全部歌单标签
    discover.getAllTags()
})
</script>

<style lang="scss" scoped>
.song-list {
    .main-list {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;

        .list {
            cursor: pointer;
            margin-top: 10px;
            margin-right: 50px;
            height: 240px;
            width: 180px;
            margin-bottom: 5px;
            position: relative;
        }

    }

}

.pagination {
    display: flex;
    justify-content: center;
}
</style>